import React, { useState, useCallback, useEffect } from 'react';
import { dinglist, dingdele, dingtian, dingxiang } from '../utlis/https';
import '../style/Dingdan.css';

// 引入分页组件和Modal弹窗组件
import { Pagination, Modal, Form, Input, InputNumber, Select, Button, Space, Row, Col, Tooltip, Descriptions, Tag } from 'antd';

const { Option } = Select;

function Dingdan() {
    // 列表数据
    const [data, setData] = useState([]);
    // 搜索关键词
    const [searchKeyword, setSearchKeyword] = useState('');
    // 加载状态
    const [loading, setLoading] = useState(false);
    // 错误信息
    const [error, setError] = useState('');
    // 分页信息
    const [fenye, setFenye] = useState(1); // 当前页码，改为数字类型
    const [limit, setLimit] = useState(5); // 每页显示条数，改为数字类型
    const [total, setTotal] = useState(50); // 总条数，默认为50
    // 删除弹出框
    const [isModalOpen, setIsModalOpen] = useState(false);
    // 删除id
    const [ID, setID] = useState('');
    // 添加订单弹出框
    const [isAddModalOpen, setIsAddModalOpen] = useState(false);
    // 编辑订单弹出框
    const [isEditModalOpen, setIsEditModalOpen] = useState(false);
    // 编辑订单ID
    const [editID, setEditID] = useState('');
    // 添加订单表单实例
    const [addForm] = Form.useForm();
    // 编辑订单表单实例
    const [editForm] = Form.useForm();
    // 搜索弹出框
    const [sisModalOpen, setSisModalOpen] = useState(false);
    // 详情弹窗状态
    const [isDetailModalOpen, setIsDetailModalOpen] = useState(false);
    // 当前查看的订单详情
    const [currentOrderDetail, setCurrentOrderDetail] = useState(null);
    // 详情加载状态
    const [detailLoading, setDetailLoading] = useState(false);

    // 获取订单的总条数
    const zongye = useCallback(async () => {
        setLoading(true);
        setError('');

        try {
            const res = await dinglist({
                page: fenye,
                pagelimit: 1000000000,
            });
            setTotal(res.data.data.length);
        } catch (err) {
        } finally {
            setLoading(false);
        }
    }, [fenye]);

    // 获取订单列表数据
    const fetchData = useCallback(async () => {
        setLoading(true);
        setError('');

        try {
            const res = await dinglist({
                page: fenye,
                pagelimit: limit,
            });

            // 更新总条数（如果API返回了总条数）
            if (res && res.data && res.data.total) {
                setTotal(res.data.total);
            }

            if (res && res.data && Array.isArray(res.data.data)) {
                setData(res.data.data);
            } else {
                throw new Error('数据格式不正确');
            }
            console.log(res.data.data);

        } catch (err) {
            console.error('获取订单列表失败:', err);
            setError('获取订单列表失败，请稍后重试');

            // 提供mock数据以便展示效果
            setData(getMockData());
        } finally {
            setLoading(false);
        }
    }, [fenye, limit]);

    // 生成mock数据
    const getMockData = () => [
        { id: 1, name: '超级会员年卡', status: 0, ordercode: '20231123001', userid: 'user123456', createTime: '2023-11-23 14:30:25', amount: 299, num: 1, price: 299, allprice: 299, iphone: '13800138000', address: '北京市朝阳区某某大厦A座1001室', remark: '请尽快发货', liuyan: '周末配送' },
        { id: 2, name: '专业版软件授权', status: 2, ordercode: '20231123002', userid: 'user234567', createTime: '2023-11-23 15:45:30', amount: 599, num: 1, price: 599, allprice: 599, iphone: '13900139000', address: '上海市浦东新区某某路123号', remark: '无特殊要求', liuyan: '请提供电子发票' },
        { id: 3, name: '基础会员月卡', status: 1, ordercode: '20231123003', userid: 'user345678', createTime: '2023-11-23 16:20:15', amount: 29, num: 1, price: 29, allprice: 29, iphone: '13700137000', address: '广州市天河区某某小区5栋302室', remark: '', liuyan: '' },
        { id: 4, name: '高级数据分析服务', status: 3, ordercode: '20231123004', userid: 'user456789', createTime: '2023-11-23 17:10:40', amount: 899, num: 1, price: 899, allprice: 899, iphone: '13600136000', address: '深圳市南山区科技园某大厦B座25楼', remark: '加急处理', liuyan: '技术支持' },
        { id: 5, name: '技术支持服务包', status: 4, ordercode: '20231123005', userid: 'user567890', createTime: '2023-11-23 18:50:22', amount: 399, num: 1, price: 399, allprice: 399, iphone: '13500135000', address: '杭州市西湖区某某路456号', remark: '需要远程指导', liuyan: '工作日联系' }
    ];

    // 组件加载时获取数据
    useEffect(() => {
        fetchData();
        zongye();
    }, [fetchData, zongye]);

    // 获取支付状态的中文描述
    const getStatusText = (status) => {
        const statusMap = {
            0: '成功',
            1: '失败',
            2: '待支付',
            3: '已取消',
            4: '售后中'
        };
        return statusMap[status] || '未知状态';
    };

    // 获取支付状态的样式类名
    const getStatusClass = (status) => {
        const statusClassMap = {
            0: 'status-success',
            1: 'status-failed',
            2: 'status-pending',
            3: 'status-canceled',
            4: 'status-aftersale'
        };
        return statusClassMap[status] || '';
    };

    // 获取支付状态对应的标签颜色
    const getStatusColor = (status) => {
        const colorMap = {
            0: 'green',
            1: 'red',
            2: 'orange',
            3: 'default',
            4: 'blue'
        };
        return colorMap[status] || 'default';
    };

    // 处理搜索
    const handleSearch = async () => {
        try {
            const res = await dinglist({
                name: searchKeyword
            });
            console.log(res);
            if (res.code === 0) {
                setData(res.data.data);
            } else {
                setSisModalOpen(true);
            }
        } catch (err) {
            console.error('搜索订单失败:', err);
            setError('搜索失败，请稍后重试');
        }
    }
    // 取消搜索弹出框
    const shandleOk = () => {
        setSisModalOpen(false);
    }
    // 取消搜索弹出框
    const shandleCancel = () => {
        setSisModalOpen(false);
    }


    // 处理添加订单弹窗显示
    const handleAddOrder = async () => {
        setIsAddModalOpen(true);
    };


    // 处理添加订单提交
    const handleAddOrderSubmit = async (values) => {
        console.log(values);

        try {
            const res = await dingtian({
                num: values.num,
                name: values.name,
                iphone: values.iphon,
                address: values.address,
                remark: values.remark,
                liuyan: values.liuyan,
                userid: sessionStorage.getItem('userid'),
                ordercode: values.ordercode,
                price: values.price,
                status: values.status,
                allprice: values.allprice,
            })
            console.log(values);

            console.log(res);
            setIsAddModalOpen(false);
            fetchData();
        } catch (err) {
            console.error('搜索订单失败:', err);
            setError('搜索失败，请稍后重试');
        }
    };

    // 处理编辑订单弹窗显示和数据回显
    const handleEditOrder = (item) => {
        // 设置编辑ID
        setEditID(item.id);

        // 填充表单数据进行回显
        editForm.setFieldsValue({
            name: item.name,
            ordercode: item.ordercode,
            status: item.status,
            num: item.num || 1, // 假设数量默认为1
            price: item.price || item.amount, // 假设amount字段对应单价
            allprice: item.allprice || item.amount, // 假设总价等于单价
            iphon: item.iphone || '', // 模拟数据中没有手机号，设为空
            address: item.address || '', // 模拟数据中没有地址，设为空
            remark: item.remark || '', // 模拟数据中没有特殊要求，设为空
            liuyan: item.liuyan || '', // 模拟数据中没有留言，设为空
        });

        // 显示编辑弹窗
        setIsEditModalOpen(true);
    };

    // 处理编辑订单提交
    const handleEditOrderSubmit = async (values) => {
        try {
            // 这里应该调用编辑订单的API，当前使用添加订单的API作为示例
            const res = await dingtian({
                id: editID,
                num: values.num,
                name: values.name,
                iphone: values.iphon,
                address: values.address,
                remark: values.remark,
                liuyan: values.liuyan,
                userid: sessionStorage.getItem('userid'),
                ordercode: values.ordercode,
                price: values.price,
                status: values.status,
                allprice: values.allprice,
            });
            console.log('编辑订单结果:', res);
            setIsEditModalOpen(false);
            fetchData(); // 重新获取订单列表
        } catch (err) {
            console.error('编辑订单失败:', err);
            setError('编辑订单失败，请稍后重试');
        }
    };

    // 处理查看订单详情
    const handleViewOrder = async (id) => {
        setDetailLoading(true);
        try {
            // 首先尝试从本地数据中查找订单详情
            const localItem = data.find(item => item.id === id);
            if (localItem) {
                setCurrentOrderDetail(localItem);
                setIsDetailModalOpen(true);
                setDetailLoading(false);
                return;
            }

            // 如果本地没有找到，再调用API获取详情
            const res = await dingxiang({
                id: id
            });
            console.log(res);

            if (res && res.data && res.data.data) {
                setCurrentOrderDetail(res.data.data);
                setIsDetailModalOpen(true);
            }
        } catch (err) {
            console.error('获取详情失败:', err);
            // 如果API调用失败，尝试使用mock数据
            const mockData = getMockData();
            const mockItem = mockData.find(item => item.id === id);
            if (mockItem) {
                setCurrentOrderDetail(mockItem);
                setIsDetailModalOpen(true);
            } else {
                setError('获取详情失败，请稍后重试');
            }
        } finally {
            setDetailLoading(false);
        }
    };

    // 处理删除订单
    const handleDeleteOrder = (id) => {
        setIsModalOpen(true);
        setID(id);
    };

    // 处理删除订单弹出框
    const handleOk = async () => {
        setIsModalOpen(false);

        try {
            const res = await dingdele({
                id: ID,
            });
            console.log('删除订单成功:', res);
            // 删除后重新获取列表
            fetchData();
        } catch (err) {
            console.error('删除订单失败:', err);
            setError('删除订单失败，请稍后重试');
        }
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };

    // 处理分页变化
    const handlePageChange = (page, pageSize) => {
        setFenye(page);
        setLimit(pageSize);
        // 清除搜索关键词，确保分页时显示完整数据
        if (searchKeyword) {
            setSearchKeyword('');
        }
    };

    // 计算总价
    const calculateTotalPrice = (num, price) => {
        const quantity = num || 0;
        const unitPrice = price || 0;
        return quantity * unitPrice;
    }

    // 编辑事件
    const xiu = (id) => {
        // 查找对应id的订单数据
        const item = data.find(item => item.id === id);
        if (item) {
            handleEditOrder(item);
        }
    }

    return (
        <div className="order-container">
            <div className="header-section">
                <h2 className="order-title">订单列表</h2>
                <button onClick={handleAddOrder} className="add-btn">
                    <i className="icon-plus"></i> 添加订单
                </button>
            </div>

            {/* 搜索区域 */}
            <div className="search-section">
                <input
                    type="text"
                    placeholder="搜索商品名称"
                    value={searchKeyword}
                    onChange={(e) => setSearchKeyword(e.target.value)}
                    className="search-input"
                />
                <button onClick={handleSearch} className="search-btn">
                    搜索
                </button>
                {searchKeyword && (
                    <button
                        onClick={() => {
                            setSearchKeyword('');
                            fetchData();
                        }}
                        className="clear-btn"
                    >
                        清除
                    </button>
                )}
            </div>

            {/* 错误提示 */}
            {error && (
                <div className="error-message">
                    {error}
                </div>
            )}

            {/* 订单列表 */}
            <div className="order-list">
                {loading ? (
                    <div className="loading">
                        <div className="loading-spinner"></div>
                        <span>加载中...</span>
                    </div>
                ) : data.length > 0 ? (
                    <div className="table-wrapper">
                        <table className="order-table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>商品名称</th>
                                    <th>订单号</th>
                                    <th>单价</th>
                                    <th>支付状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {data.map((item) => (
                                    <tr key={item.id} className="order-item">
                                        <td>{item.id}</td>
                                        <td className="order-name">{item.name}</td>
                                        <td className="order-code">
                                            <span className="code-highlight">{item.ordercode}</span>
                                        </td>
                                        <td className="price-cell">{item.price}</td>
                                        <td>
                                            <span className={`status ${getStatusClass(item.status)}`}>
                                                {getStatusText(item.status)}
                                            </span>
                                        </td>
                                        <td className="action-buttons">
                                            <button
                                                className="view-btn"
                                                onClick={() => handleViewOrder(item.id)}
                                                title="查看详情"
                                            >
                                                详情
                                            </button>
                                            <button
                                                className="delete-btn"
                                                onClick={() => handleDeleteOrder(item.id)}
                                            >
                                                删除
                                            </button>
                                            <button
                                                className="view-btn1"
                                                onClick={() => xiu(item.id)}>编辑</button>
                                        </td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>

                        {/* 分页组件 - 优化版本 */}
                        <div className="pagination-wrapper">
                            <Pagination
                                current={fenye}
                                pageSize={limit}
                                total={total}
                                onChange={handlePageChange}
                                showSizeChanger
                                showQuickJumper
                                showTotal={(total) => `共 ${total} 条数据`}
                                pageSizeOptions={['5', '10', '20', '50']}
                            />
                        </div>
                    </div>
                ) : (
                    <div className="empty-tip">
                        <div className="empty-icon">📦</div>
                        <p>暂无订单数据</p>
                        {searchKeyword && <p>尝试更改搜索条件或清除筛选</p>}
                    </div>
                )}
                {/* 删除确认弹窗 */}
                <Modal
                    closable={{ 'aria-label': 'Custom Close Button' }}
                    open={isModalOpen}
                    onOk={handleOk}
                    onCancel={handleCancel}
                    okText="确认"
                    cancelText="取消"
                    centered
                >
                    <p>确定删除订单吗？</p>
                </Modal>
                {/* 搜索不到时的弹出框 */}
                <Modal
                    closable={{ 'aria-label': 'Custom Close Button' }}
                    open={sisModalOpen}
                    onOk={shandleOk}
                    onCancel={shandleCancel}
                    okText="确认"
                    cancelText="取消"
                    centered
                >
                    <p>未找到你搜索的信息</p>
                </Modal>

                {/* 添加订单弹窗 - 优化布局 */}
                <Modal
                    title="添加新订单"
                    open={isAddModalOpen}
                    onCancel={() => setIsAddModalOpen(false)}
                    footer={null}
                    width={800}
                    centered
                    style={{
                        borderRadius: '12px',
                        boxShadow: '0 6px 24px rgba(0, 0, 0, 0.15)',
                        border: 'none'
                    }}
                >
                    <Form
                        form={addForm}
                        layout="vertical"
                        onFinish={handleAddOrderSubmit}
                        style={{ maxHeight: '60vh', overflowY: 'auto', paddingRight: '10px' }}
                        initialValues={{
                            num: 1,
                            status: 2,
                            price: 0,
                            allprice: 0
                        }}
                        onValuesChange={(changedValues, allValues) => {
                            // 避免使用addForm.getFieldValue和setFieldValue造成的循环引用
                            // 使用setTimeout将更新放入下一个事件循环
                            setTimeout(() => {
                                if ((changedValues.num !== undefined || changedValues.price !== undefined) && !changedValues.allprice) {
                                    const num = allValues.num || 0;
                                    const price = allValues.price || 0;
                                    const totalPrice = calculateTotalPrice(num, price);
                                    // 使用setFieldsValue而不是setFieldValue可以避免不必要的更新
                                    addForm.setFieldsValue({
                                        allprice: totalPrice
                                    });
                                }
                            }, 0);
                        }}
                    >
                        {/* 基本信息区域 */}
                        <div className="form-section">
                            <h4 className="form-section-title">基本信息</h4>
                            <Row gutter={24}>
                                <Col span={12}>
                                    <Form.Item
                                        label={
                                            <span>
                                                商品名称 <span className="required-mark">*</span>
                                            </span>
                                        }
                                        name="name"
                                        rules={[{ required: true, message: '请输入商品名称' }]}
                                    >
                                        <Input placeholder="请输入商品名称" size="middle" />
                                    </Form.Item>
                                </Col>
                                <Col span={12}>
                                    <Form.Item
                                        label={
                                            <span>
                                                订单号 <span className="required-mark">*</span>
                                            </span>
                                        }
                                        name="ordercode"
                                        rules={[{ required: true, message: '请输入订单号' }]}
                                    >
                                        <Input placeholder="系统自动生成" size="middle" />
                                    </Form.Item>
                                </Col>
                            </Row>
                        </div>

                        {/* 用户信息区域 */}
                        <div className="form-section">
                            <Row gutter={24}>
                                <Col span={16}>
                                    <Form.Item
                                        label={
                                            <span>
                                                手机号 <span className="required-mark">*</span>
                                            </span>
                                        }
                                        name="iphon"
                                        rules={[
                                            { required: true, message: '请输入手机号' },
                                            { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式' }
                                        ]}
                                    >
                                        <Input placeholder="请输入手机号" size="middle" />
                                    </Form.Item>
                                </Col>
                            </Row>

                            <Form.Item
                                label={
                                    <span>
                                        地址 <span className="required-mark">*</span>
                                    </span>
                                }
                                name="address"
                                rules={[{ required: true, message: '请输入地址' }]}
                            >
                                <Input.TextArea rows={3} placeholder="请输入详细地址" size="middle" />
                            </Form.Item>
                        </div>

                        {/* 订单金额区域 */}
                        <div className="form-section">
                            <h4 className="form-section-title">订单金额</h4>
                            <Row gutter={24}>
                                <Col span={8}>
                                    <Form.Item
                                        label={
                                            <span>
                                                数量 <span className="required-mark">*</span>
                                            </span>
                                        }
                                        name="num"
                                        rules={[{ required: true, message: '请输入数量' }]}
                                    >
                                        <InputNumber min={1} style={{ width: '100%' }} size="middle" />
                                    </Form.Item>
                                </Col>
                                <Col span={8}>
                                    <Form.Item
                                        label={
                                            <span>
                                                单价 <span className="required-mark">*</span>
                                            </span>
                                        }
                                        name="price"
                                        rules={[{ required: true, message: '请输入单价' }]}
                                    >
                                        <InputNumber min={0} step={0.01} style={{ width: '100%' }} size="middle" />
                                    </Form.Item>
                                </Col>
                                <Col span={8}>
                                    <Form.Item
                                        label={
                                            <span>
                                                总价 <span className="required-mark">*</span>
                                            </span>
                                        }
                                        name="allprice"
                                        rules={[{ required: true, message: '请输入总价' }]}
                                    >
                                        <Tooltip title="系统根据数量和单价自动计算">
                                            {/* 设置为禁用状态，明确这是一个自动计算的字段 */}
                                            <InputNumber min={0} step={0.01} style={{ width: '100%' }} size="middle" disabled />
                                        </Tooltip>
                                    </Form.Item>
                                </Col>
                            </Row>
                        </div>

                        {/* 其他信息区域 */}
                        <div className="form-section">
                            <h4 className="form-section-title">其他信息</h4>
                            <Row gutter={24}>
                                <Col span={12}>
                                    <Form.Item
                                        label={
                                            <span>
                                                支付状态 <span className="required-mark">*</span>
                                            </span>
                                        }
                                        name="status"
                                        rules={[{ required: true, message: '请选择支付状态' }]}
                                    >
                                        <Select placeholder="请选择支付状态" size="middle">
                                            <Option value={0}>成功</Option>
                                            <Option value={1}>失败</Option>
                                            <Option value={2}>待支付</Option>
                                            <Option value={3}>已取消</Option>
                                            <Option value={4}>售后中</Option>
                                        </Select>
                                    </Form.Item>
                                </Col>
                            </Row>

                            <Row gutter={24}>
                                <Col span={12}>
                                    <Form.Item
                                        label={
                                            <span>
                                                特殊要求 <span className="optional-mark">（选填）</span>
                                            </span>
                                        }
                                        name="remark"
                                    >
                                        <Input.TextArea rows={2} placeholder="请输入特殊要求" size="middle" />
                                    </Form.Item>
                                </Col>
                                <Col span={12}>
                                    <Form.Item
                                        label={
                                            <span>
                                                留言 <span className="optional-mark">（选填）</span>
                                            </span>
                                        }
                                        name="liuyan"
                                    >
                                        <Input.TextArea rows={2} placeholder="请输入留言" size="middle" />
                                    </Form.Item>
                                </Col>
                            </Row>
                        </div>

                        {/* 表单底部操作按钮 */}
                        <div className="form-footer">
                            <Space style={{ float: 'right' }}>
                                <Button
                                    onClick={() => setIsAddModalOpen(false)}
                                    size="middle"
                                    style={{
                                        padding: '0 20px',
                                        borderRadius: '6px',
                                        borderColor: '#d9d9d9'
                                    }}
                                >
                                    取消
                                </Button>
                                <Button
                                    type="primary"
                                    htmlType="submit"
                                    loading={loading}
                                    size="middle"
                                    style={{
                                        padding: '0 24px',
                                        borderRadius: '6px',
                                        background: '#1890ff',
                                        borderColor: '#1890ff'
                                    }}
                                >
                                    确认添加
                                </Button>
                            </Space>
                        </div>
                    </Form>
                </Modal>

                {/* 编辑订单弹窗 - 与添加弹窗内容相同，但标题不同 */}
                <Modal
                    title="编辑订单"
                    open={isEditModalOpen}
                    onCancel={() => setIsEditModalOpen(false)}
                    footer={null}
                    width={800}
                    centered
                    style={{
                        borderRadius: '12px',
                        boxShadow: '0 6px 24px rgba(0, 0, 0, 0.15)',
                        border: 'none'
                    }}
                >
                    <Form
                        form={editForm}
                        layout="vertical"
                        onFinish={handleEditOrderSubmit}
                        style={{ maxHeight: '60vh', overflowY: 'auto', paddingRight: '10px' }}
                        onValuesChange={(changedValues, allValues) => {
                            // 避免使用editForm.getFieldValue和setFieldValue造成的循环引用
                            // 使用setTimeout将更新放入下一个事件循环
                            setTimeout(() => {
                                if ((changedValues.num !== undefined || changedValues.price !== undefined) && !changedValues.allprice) {
                                    const num = allValues.num || 0;
                                    const price = allValues.price || 0;
                                    const totalPrice = calculateTotalPrice(num, price);
                                    // 使用setFieldsValue而不是setFieldValue可以避免不必要的更新
                                    editForm.setFieldsValue({
                                        allprice: totalPrice
                                    });
                                }
                            }, 0);
                        }}
                    >
                        {/* 基本信息区域 */}
                        <div className="form-section">
                            <h4 className="form-section-title">基本信息</h4>
                            <Row gutter={24}>
                                <Col span={12}>
                                    <Form.Item
                                        label={
                                            <span>
                                                商品名称 <span className="required-mark">*</span>
                                            </span>
                                        }
                                        name="name"
                                        rules={[{ required: true, message: '请输入商品名称' }]}
                                    >
                                        <Input placeholder="请输入商品名称" size="middle" />
                                    </Form.Item>
                                </Col>
                                <Col span={12}>
                                    <Form.Item
                                        label={
                                            <span>
                                                订单号 <span className="required-mark">*</span>
                                            </span>
                                        }
                                        name="ordercode"
                                        rules={[{ required: true, message: '请输入订单号' }]}
                                    >
                                        <Input placeholder="系统自动生成" size="middle" />
                                    </Form.Item>
                                </Col>
                            </Row>
                        </div>

                        {/* 用户信息区域 */}
                        <div className="form-section">
                            <Row gutter={24}>
                                <Col span={16}>
                                    <Form.Item
                                        label={
                                            <span>
                                                手机号 <span className="required-mark">*</span>
                                            </span>
                                        }
                                        name="iphon"
                                        rules={[
                                            { required: true, message: '请输入手机号' },
                                            { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式' }
                                        ]}
                                    >
                                        <Input placeholder="请输入手机号" size="middle" />
                                    </Form.Item>
                                </Col>
                            </Row>

                            <Form.Item
                                label={
                                    <span>
                                        地址 <span className="required-mark">*</span>
                                    </span>
                                }
                                name="address"
                                rules={[{ required: true, message: '请输入地址' }]}
                            >
                                <Input.TextArea rows={3} placeholder="请输入详细地址" size="middle" />
                            </Form.Item>
                        </div>

                        {/* 订单金额区域 */}
                        <div className="form-section">
                            <h4 className="form-section-title">订单金额</h4>
                            <Row gutter={24}>
                                <Col span={8}>
                                    <Form.Item
                                        label={
                                            <span>
                                                数量 <span className="required-mark">*</span>
                                            </span>
                                        }
                                        name="num"
                                        rules={[{ required: true, message: '请输入数量' }]}
                                    >
                                        <InputNumber min={1} style={{ width: '100%' }} size="middle" />
                                    </Form.Item>
                                </Col>
                                <Col span={8}>
                                    <Form.Item
                                        label={
                                            <span>
                                                单价 <span className="required-mark">*</span>
                                            </span>
                                        }
                                        name="price"
                                        rules={[{ required: true, message: '请输入单价' }]}
                                    >
                                        <InputNumber min={0} step={0.01} style={{ width: '100%' }} size="middle" />
                                    </Form.Item>
                                </Col>
                                <Col span={8}>
                                    <Form.Item
                                        label={
                                            <span>
                                                总价 <span className="required-mark">*</span>
                                            </span>
                                        }
                                        name="allprice"
                                        rules={[{ required: true, message: '请输入总价' }]}
                                    >
                                        <Tooltip title="系统根据数量和单价自动计算">
                                            {/* 设置为禁用状态，明确这是一个自动计算的字段 */}
                                            <InputNumber min={0} step={0.01} style={{ width: '100%' }} size="middle" disabled />
                                        </Tooltip>
                                    </Form.Item>
                                </Col>
                            </Row>
                        </div>

                        {/* 其他信息区域 */}
                        <div className="form-section">
                            <h4 className="form-section-title">其他信息</h4>
                            <Row gutter={24}>
                                <Col span={12}>
                                    <Form.Item
                                        label={
                                            <span>
                                                支付状态 <span className="required-mark">*</span>
                                            </span>
                                        }
                                        name="status"
                                        rules={[{ required: true, message: '请选择支付状态' }]}
                                    >
                                        <Select placeholder="请选择支付状态" size="middle">
                                            <Option value={0}>成功</Option>
                                            <Option value={1}>失败</Option>
                                            <Option value={2}>待支付</Option>
                                            <Option value={3}>已取消</Option>
                                            <Option value={4}>售后中</Option>
                                        </Select>
                                    </Form.Item>
                                </Col>
                            </Row>

                            <Row gutter={24}>
                                <Col span={12}>
                                    <Form.Item
                                        label={
                                            <span>
                                                特殊要求 <span className="optional-mark">（选填）</span>
                                            </span>
                                        }
                                        name="remark"
                                    >
                                        <Input.TextArea rows={2} placeholder="请输入特殊要求" size="middle" />
                                    </Form.Item>
                                </Col>
                                <Col span={12}>
                                    <Form.Item
                                        label={
                                            <span>
                                                留言 <span className="optional-mark">（选填）</span>
                                            </span>
                                        }
                                        name="liuyan"
                                    >
                                        <Input.TextArea rows={2} placeholder="请输入留言" size="middle" />
                                    </Form.Item>
                                </Col>
                            </Row>
                        </div>

                        {/* 表单底部操作按钮 */}
                        <div className="form-footer">
                            <Space style={{ float: 'right' }}>
                                <Button
                                    onClick={() => setIsEditModalOpen(false)}
                                    size="middle"
                                    style={{
                                        padding: '0 20px',
                                        borderRadius: '6px',
                                        borderColor: '#d9d9d9'
                                    }}
                                >
                                    取消
                                </Button>
                                <Button
                                    type="primary"
                                    htmlType="submit"
                                    loading={loading}
                                    size="middle"
                                    style={{
                                        padding: '0 24px',
                                        borderRadius: '6px',
                                        background: '#1890ff',
                                        borderColor: '#1890ff'
                                    }}
                                >
                                    确定
                                </Button>
                            </Space>
                        </div>
                    </Form>
                </Modal>

                {/* 订单详情弹窗 - 美观的详情展示 */}
                <Modal
                    title="订单详情"
                    open={isDetailModalOpen}
                    onCancel={() => setIsDetailModalOpen(false)}
                    footer={null}
                    width={700}
                    centered
                    closable={false}
                    className="order-detail-modal"
                    style={{
                        borderRadius: '12px',
                        boxShadow: '0 8px 32px rgba(0, 0, 0, 0.15)',
                        border: 'none',
                        overflow: 'hidden'
                    }}
                >
                    {detailLoading ? (
                        <div className="loading-container">
                            <div className="loading-spinner"></div>
                            <span>加载详情中...</span>
                        </div>
                    ) : currentOrderDetail ? (
                        <div className="order-detail-content">
                            {/* 订单头部信息 */}
                            <div className="detail-header">
                                <div className="detail-title">
                                    <h3>{currentOrderDetail.name}</h3>
                                    <Tag color={getStatusColor(currentOrderDetail.status)}>
                                        {getStatusText(currentOrderDetail.status)}
                                    </Tag>
                                </div>
                                <div className="order-time">
                                    创建时间: {currentOrderDetail.addtime || '未知'}
                                </div>
                            </div>

                            {/* 订单详情描述 */}
                            <div className="detail-info">
                                <Descriptions column={1} bordered size="middle" style={{ marginTop: '16px' }}>
                                    <Descriptions.Item label="订单编号" span={1}>
                                        <span className="detail-code">{currentOrderDetail.ordercode || '未知'}</span>
                                    </Descriptions.Item>
                                    {/* <Descriptions.Item label="用户ID">{currentOrderDetail.userid || '未知'}</Descriptions.Item> */}
                                    <Descriptions.Item label="联系电话">{currentOrderDetail.iphone || '未知'}</Descriptions.Item>
                                    <Descriptions.Item label="收货地址">
                                        <div className="detail-address">{currentOrderDetail.address || '未知'}</div>
                                    </Descriptions.Item>

                                    {/* 订单金额信息 */}
                                    <Descriptions.Item label="数量">{currentOrderDetail.num || 1}</Descriptions.Item>
                                    <Descriptions.Item label="单价">¥{(currentOrderDetail.price || currentOrderDetail.amount || 0).toFixed(2)}</Descriptions.Item>
                                    <Descriptions.Item label="总价" className="detail-total-price">
                                        ¥{(currentOrderDetail.allprice || currentOrderDetail.amount || 0).toFixed(2)}
                                    </Descriptions.Item>

                                    {/* 其他信息 */}
                                    <Descriptions.Item label="特殊要求">
                                        {currentOrderDetail.remark || '-'}
                                    </Descriptions.Item>
                                    <Descriptions.Item label="留言">
                                        {currentOrderDetail.liuyan || '-'}
                                    </Descriptions.Item>
                                </Descriptions>
                            </div>

                            {/* 底部按钮 */}
                            <div className="detail-footer">
                                <Button
                                    type="primary"
                                    onClick={() => setIsDetailModalOpen(false)}
                                    size="middle"
                                    style={{
                                        padding: '0 24px',
                                        borderRadius: '6px',
                                        background: '#1890ff',
                                        borderColor: '#1890ff',
                                        marginTop: '20px'
                                    }}
                                >
                                    关闭
                                </Button>
                            </div>
                        </div>
                    ) : (
                        <div className="empty-detail">
                            <p>暂无订单详情数据</p>
                        </div>
                    )}
                </Modal>
            </div>
        </div>
    )
}

export default Dingdan